<template>

    <div class="content-item sync-profile">
        <h2>
            <strong>Shipping profile</strong>
            <em v-if="error ">Please select Shipping profile</em>
        </h2>

        <p :class="{ active: newone }" @click="newone = true">
            <span>Create a new shipping profile</span>
            <a @click.stop="dialog = true">Preview</a>
        </p>
        <p :class="{ active: !newone }" @click="newone = false">
            <span>Select an existing shipping profile</span>
        </p>

        <UxLoading class="content-loading" v-if="loading" />

        <div class="content-nodta" v-else-if="list == 0">
            <span>Failed to load etsy shipping profile list, please reload again.</span>
            <button @click="getList()">reload</button>
        </div>

        <el-select v-else v-model="profile" placeholder="Select shipping profile" :disabled="newone">
            <el-option v-for="item in list" :key="item.shipping_profile_id" :label="item.title" :value="item.shipping_profile_id"></el-option>
        </el-select>

        <!-- 物流模板 -->
        <SynchronizeShipping v-model="dialog" :product="product_id" />

    </div>

</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "SynchronizeEtsyStyle",
    props: {
        value: { type: [String, Number], default: () => '' },
        isnew: { type: Boolean, default: () => '' },
    },
    data () {
        return {
            loading: true,
            error: false,
            dialog: false,
            list: [],
        };
    },
    computed: {
        ...mapState("synchronize", {
            clothes: "clothes",
            shop: "shop",
        }),

        product_id () {
            return (this.clothes[0] || {}).product_id || 0;
        },

        newone: {
            get () {
                return this.isnew;
            },
            set (val) {
                if (this.isnew != val) {
                    this.$emit('update:isnew', val).then(r => '').catch(e => '');
                }
            },
        },

        profile: {
            get () {
                return this.value;
            },
            set (val) {
                if (this.value != val) {
                    this.$emit('input', val);
                }
            },
        },
    },

    methods: {


        checkError () {
            if (!this.newone && !this.profile) {
                this.error = true;
                this.$uxMessage.error({
                    message: "Please select Shipping profile",
                    duration: 5000,
                });
                return false;
            } else {
                return true;
            }

        },

        getList () {
            this.loading = true;
            // 商品id
            this.$http("UserStore.getEtsyShippingProfile/" + this.shop.shop_id).then((response) => {
                if (response.code === 0) {
                    this.list = response.data || [];
                    this.loading = false
                } else {
                    this.loading = false
                }
            });
        },
    },
    created () {
        this.getList();
        this.$on('global:SYNCHRONIZE_CHECK', this.checkError)
    },
};
</script>
<style lang="scss" scoped>
.sync-profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;

    .content-loading {
        position: relative;
        height: 58px;
        width: 80px;
        margin: 0;
        padding: 0;
    }

    .content-nodta {
        display: flex;
        flex-direction: column;

        span {
            font-size: 14px;
            line-height: 18px;
            color: #f00;
        }

        button {
            margin-top: 8px;
            width: 80px;
            height: 32px;
        }
    }

    & > p {
        display: inline-block;
        position: relative;
        height: 18px;
        font-size: 14px;

        color: #000000;
        line-height: 18px;
        padding-left: 30px;
        padding-right: 50px;
        cursor: pointer;
        user-select: none;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            border-radius: 9px;
            border: 2px solid #919191;
            box-sizing: border-box;
        }

        &::after {
            display: none;
            content: '';
            position: absolute;
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: #ea4c89;
            border-radius: 9px;
        }

        &.active {
            &::before {
                border-color: #ea4c89;
            }
            &::after {
                display: block;
            }
        }

        & + p {
            margin-top: 16px;
        }
    }
    & > p {
        a {
            font-size: 14px;

            color: #000000;
            text-decoration: underline;
            margin-left: 12px;
            &:hover {
                color: #ea4c89;
            }
        }
    }

    .el-select {
        height: 36px;
        margin-top: 18px;
        margin-left: 30px;
        width: 360px;
    }

    .content-nodta {
        margin-left: 30px;
        margin-top: 16px;
    }
    .content-loading {
        margin-top: 16px;
        margin-left: 30px;
    }
}
</style>
